{% extends base_layout %}

{% block header_title %}
    {% trans %}Forgot your password?{% endtrans %}
{% endblock %}

{% block content %}
    <script>
        var RecaptchaOptions = {
            theme : 'white'
        };
    </script>

    <form id="form_reset_password" action="{{ url|safe }}" method="post" class="well form-horizontal">
        <fieldset>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            <div class="control-group">
                <label class="control-label" for="email_or_username">{% trans %}Username or Email{% endtrans %}:</label>
                <div class="controls">
                    <input class="input-xlarge focused required" name="email_or_username" id="email_or_username" type="text" placeholder="{{ _("Enter your")|safe }} {{ _("Username or Email")|safe }}" />
                </div>
            </div>
            <div class="control-group">
                <div class="controls" id="captcha">
                    {{captchahtml | safe}}
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">{% trans %}Reset password{% endtrans %}</button>
            </div>
        </fieldset>
    </form>
{% endblock %}

{% block mediaJS %}
    <script>
        $().ready(function() {
            $("#form_reset_password").validate({
                submitHandler: function(form) {
                    form.submit();
                },
                errorPlacement: function(error, element) {
                    element.parent().parent().addClass("error");
                    error.addClass("help-inline").appendTo( element.parent() );
                }
            });
        });
    </script>
{% endblock %}